<template>
    <div class="header yahei">
        <div class="navbar">
            <div class="left">
                <div class="icon-box">
                    <div class="icon"><img src="../../assets/images/logo.png" alt=""></div>
                    <div class="eet"> <img src="../../assets/images/eet.png" alt=""></div>
                </div>
                <span class="info">模组化高能效制冷机房</span>
            </div>
            <div class="middle c_flex">控制 <span>与</span> 管理平台</div>
            <div class="right">
                <table>
                    <tr class="time-box">
                        <td>{{currentDate}}</td>
                        <td>{{currentDay}}</td>
                        <td>{{currentTime}}</td>
                    </tr>
                    <tr class="login-box">
                        <td>当前登录</td>
                        <td>Job</td>
                        <td><button class="login">登录</button><button class="logout">退出</button></td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</template>
<script>
export default {
  name: 'HeaderView',
  data () {
    return {
      currentDate: '2023/2/20',
      currentDay: '星期五',
      currentTime: '12:22:22'
    }
  },
  created () {
    this.getCurrentDateTime()
  },
  methods: {
    getCurrentDateTime () {
      const date = new Date()

      // 获取年月日
      const year = date.getFullYear()
      const month = date.getMonth() + 1
      const day = date.getDate()

      // 获取星期几
      const weekday = ['日', '一', '二', '三', '四', '五', '六']
      const dayOfWeek = date.getDay()
      const week = `星期${weekday[dayOfWeek]}`

      // 获取时分秒
      const hours = ('0' + date.getHours()).slice(-2)
      const minutes = ('0' + date.getMinutes()).slice(-2)
      const seconds = ('0' + date.getSeconds()).slice(-2)

      // 更新数据
      this.currentDate = `${year}年${month}月${day}日`
      this.currentDay = week
      this.currentTime = `${hours} : ${minutes} : ${seconds}`

      // 每秒钟更新一次时间
      setTimeout(() => {
        this.getCurrentDateTime()
      }, 1000)
    }
  }
}
</script>
<style lang="less" scoped>

.header {
    border-bottom: 2px solid rgba(24, 144, 255, .25);
    background-image: linear-gradient(#161d31, #232b40) !important;
    padding: 0rem .5rem;
    box-shadow: 0 4px 24px 0 rgba(34, 41, 47, .75);
    color: #fff;
    height: 8vh;
}

.navbar {
    padding: 0 .5rem;
    display: flex;
    justify-content: space-between;

}
.left{
    display: flex;
    .icon-box{
        display: flex;
        align-items: center;
        .icon{
            width: 35px;
            height:35px;
            display: flex;
            align-items: center;

        }
        .eet{
            width: 35px;
            height:35px;
            margin: 0 12px;
            img{
                width: 100%;
                object-fit: contain;
            }

        }

    }
    .info{
        font-size: 0.75rem;
        padding-top: 1.5rem;
        font-family: "华文细黑";
    }
}
.middle{
    // font-style: italic;
    font-weight: bolder;
    font-size:32px;
    letter-spacing: .5em;
    span{
        font-size: 20px;
        font-weight: 100;
    }
}
.right {
    font-size: 0.75rem;
    color: #fff;
    font-family: "华文细黑", Arial, sans-serif;
    td{
        // padding-right: 4px;
    }
    .login-box{
        .login{
            margin-right: 12px;
        }
        .login,.logout{
            font-size: 0.75rem;
            font-family: "华文细黑", Arial, sans-serif;
            color: #283046;
            padding: 0 4px;
        }
    }
}

</style>
